<template>
    <div class='left-content'>
        <div class='content-group'>
            <a
                class='to_home title font-weight-bold font-weight-black'
                href='./'
            >De Lattre</a>
            <p>1 allée George Sand, 93140 Bondy</p>
            <p>0 800 444 800</p>
            <p>(Service & Appel gratuits)</p>
        </div>

        <template v-if='(list.length === 0 || !isViewList)'>
            <div class='content-group'>
                <p class='title font-weight-bold font-weight-black'>L'adresse</p>
                <p>Au fil de l’eau, un art de vivre entièrement nouveau. L’opération plaine de l’Ourcq est une des mutations urbaines les plus importantes de la métropole. Vaste de 200 hectares, elle vient donner une cohérence et une identité à l’ensemble des rives du Canal. La ZAC de Bondy s’inscrit donc dans une parenté directe avec celles du Port, à Pantin ou celle de l’Horloge, à Romainville, très recherchées. Conçue comme un véritable lieu de vie, la ZAC accueille de nouveaux commerces. Des espaces de promenade, de verdure et de loisirs ponctuent également l’ensemble du quartier, offrant à votre vie quotidienne des perspectives sereines. En choisissant une adresse en première ligne face au canal de l’Ourcq, vous êtes aux premières loges pour profiter des aménagements du quartier et des vues qu’il offre.</p>
            </div>

            <div class='content-group'>
                <p class='title font-weight-bold font-weight-black'>Potager et terrasses sur le toit</p>
                <p>Au bord du canal de l’Ourcq, votre résidence met la nature à l’honneur à tous les étages. Une terrasse partagée sur le toit, accessible directement par l’ascenseur, accueille ainsi un jardin potager. Ce lieu de partage renforce l’identité très verte de la réalisation, avec ses jardins plantés d’essences locales, son équilibre favorisant la biodiversité et ses bacs de compost pour les déchets ménagers organiques…Le respect de l’environnement intègrera votre quotidien tout en douceur. Architecturalement, la résidence présente des lignes géométriques contemporaines, ciselées par les terrasses et balcons. Les gradations de hauteur des bâtiments et la discrétion des espaces extérieurs, avec leur garde-corps en verre, permettent d’ouvrir au maximum les perspectives depuis les appartements.</p>
            </div>

            <div class='content-group'>
                <p
                    class='title font-weight-bold font-weight-black'
                >Un grand choix de duplex et de surfaces évolutives</p>
                <p>De 23 m² à 106 m², la variété exhaustive d’agencements et de surfaces donnera vie à tous vos projets. Pour chaque typologie, du studio au 5 pièces, vous avez le choix entre un appartement de plain-pied ou en duplex, une surface classique ou intégrant une pièce supplémentaire à aménager comme vous le souhaitez (bureau, family room…). Cette grande modularité vous permet de créer un intérieur qui vous ressemble. L’isolation renforcée des appartements, 20 % plus économes que la RT 2012, vous promet un confort accru et une moindre dépense énergétique. Côté prestations intérieures, le grand choix de nuances et de styles se prêtera à toutes vos envies déco.</p>
            </div>
        </template>
        <template v-else>
            <div class='group-view-list'>
                <p
                    v-for='(item, index) in list'
                    :key='index'
                    class='group-view-item'
                    @click='listClickHandler(item)'
                >{{` ${item.etage} / ${item.nom} / ${item.price + " €"} / ${item.surface + " m²"} / ${item.piece} `}}</p>
            </div>
        </template>
    </div>
</template>


<script>
export default {
    props: {
        list: {
            type: Array,
            default: [],
        },
        isViewList: Boolean,
    },
    methods: {
        listClickHandler(item) {
            this.$emit('listClick', item);
        },
    },
};
</script>


<style lang='scss' scoped>
.left-content {
    box-sizing: border-box;
    padding: 0px 20px;
    .content-group {
        font-size: 14px;
        margin-top: 40px;
        p {
            word-break: break-all;
            color: #101010;
        }

        .title {
            font-size: 20px;
        }
        .to_home{
            transition: color .5s ease;
            user-select: none;
        }
        .to_home:hover{
            color: red;

        }
    }
    .group-view-list {
        margin-top: 40px;
        .group-view-item {
            font-size: 13px;
            color: #161515;
            box-sizing: border-box;
            padding: 2.5px 0px 2.5px 5px;
            line-height: 10px;
            cursor: pointer;
            transition: background 0.5s ease;
            &:hover {
                background-color: #d8d8d8;
            }
        }
    }
}
</style>